import React from "react"
import { Col, Divider, Flex, Row } from "antd"

/**
 * 菜单栏
 * @returns 
 */
const MenuBar = () => {

    return (
        <Flex>
            <div style={{ width: '70%' }}>
                <Flex>
                    <Flex flex={2} justify="space-evenly" align="center">
                        <div>动态</div>
                        <div>热门</div>
                    </Flex>
                    <Flex flex={8}>
                        <Row justify="space-evenly" gutter={[20, 4]} style={{ width: '100%' }}>
                            {/* 第一行的 8 个列 */}
                            <Col span={3}>1</Col>
                            <Col span={3}>2</Col>
                            <Col span={3}>3</Col>
                            <Col span={3}>4</Col>
                            <Col span={3}>5</Col>
                            <Col span={3}>6</Col>
                            <Col span={3}>7</Col>
                            <Col span={3}>8</Col>

                            {/* 第二行的 8 个列 */}
                            <Col span={3}>10</Col>
                            <Col span={3}>11</Col>
                            <Col span={3}>12</Col>
                            <Col span={3}>13</Col>
                            <Col span={3}>14</Col>
                            <Col span={3}>15</Col>
                            <Col span={3}>16</Col>
                            <Col span={3}>17</Col>

                        </Row>
                    </Flex>
                </Flex>
            </div>
            <Divider type="vertical" style={{height: 'auto'}} />
            <div style={{ width: '30%' }}>
                <Flex flex={8}>
                    <Row justify="space-evenly" gutter={[18, 4]} style={{ width: '100%' }}>
                        {/* 第一行的 8 个列 */}
                        <Col span={8}>1</Col>
                        <Col span={8}>2</Col>
                        <Col span={8}>3</Col>
                        <Col span={8}>4</Col>
                        <Col span={8}>5</Col>
                        <Col span={8}>6</Col>
                    </Row>
                </Flex>
            </div>
        </Flex>
    )
}

export default MenuBar;